<template>
  <el-select
    v-model="value"
    placeholder="请选择主题色"
    style="width: 240px"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>
<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { setStorage, getStorage } from '@/utils'
  import { useThemeStore } from '@/store/theme'
  const themeStore = useThemeStore()
  // const value = computed(() => {
  //   return getStorage('theme', true) || 'theme_default'
  // })
  const value = ref(getStorage('theme', true) || 'theme_default')
  const options = [
    {
      value: 'theme_default',
      label: '默认'
    },
    {
      value: 'theme_orange',
      label: '活力橙'
    },
    {
      value: 'theme_gray',
      label: '深沉灰'
    }
  ]
  const handleChange = (val: string) => {
    debugger
    const app = document.querySelector('#app')
    app.className = ''
    app.classList.add(val)
    // setStorage('theme', val, 0)
    themeStore.setTheme(val)
  }
</script>
